{% import 'components/Block/Block.html' as Block %}

{% macro render(id) %}
  <section id="{{ id }}" class="{{ id }}">
    <article class="BlockLayout BlockLayout--typeGrid">
      <div class="BlockWrapper">
        {{ Block.render('snap', {index: 1, draggable: true, classes: ['draggable-source']}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('two', {index: 2}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('', {index: 3, type: 'Stripes', classes: ['draggable-source']}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('', {index: 4, type: 'Stripes', classes: ['draggable-source']}) }}
      </div>

      <div class="BlockWrapper">
        {{ Block.render('five', {index: 5}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('', {index: 6, type: 'Stripes', classes: ['draggable-source']}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('crack', {index: 7, draggable: true, classes: ['draggable-source']}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('eight', {index: 8}) }}
      </div>

      <div class="BlockWrapper">
        {{ Block.render('', {index: 9, type: 'Stripes', classes: ['draggable-source']}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('ten', {index: 10}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('', {index: 11, type: 'Stripes', classes: ['draggable-source']}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('pop', {index: 12, draggable: true, classes: ['draggable-source']}) }}
      </div>

      <div class="BlockWrapper">
        {{ Block.render('pow', {index: 13, draggable: true, classes: ['draggable-source']}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('', {index: 14, type: 'Stripes', classes: ['draggable-source']}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('fifteen', {index: 15}) }}
      </div>
      <div class="BlockWrapper">
        {{ Block.render('', {index: 16, type: 'Stripes', classes: ['draggable-source']}) }}
      </div>
    </article>
  </section>
{% endmacro %}
